<template>
    <div v-show="value" class="shell-menu">
        <div class="mask" @click="onClose"></div>
        <div class="body">
            <div class="title">
                <div>请选择类目</div>
            </div>
            <div class="menu">
                <div v-for="(gan, ganId) in menuTree" :key="ganId" class="gan">
                    <span class="gan-name">{{ gan._name }}</span>

                    <div class="mu-list">
                        <div
                            v-for="(mu, muId) in gan"
                            v-show="muId !== '_name'"
                            :key="muId"
                            :class="{ 'mu-active': curMu === muId, mu: true }"
                            :data-mu-name="mu._name"
                            :data-mu-id="muId"
                            @click="changeMu(gan, muId, mu)"
                        >
                            <div class="mu-item">
                                <span class="mu-name">{{ mu._name }}</span>

                                <!-- 科 -->
                                <div v-show="curMu === muId" class="ke-list">
                                    <div
                                        v-for="(ke, keId) in mu"
                                        v-show="keId !== '_name'"
                                        :key="keId"
                                        :class="{
                                            'ke-active': curKe === keId,
                                            ke: true,
                                        }"
                                        :data-ke-name="ke._name"
                                        :data-ke-id="keId"
                                        @click="changeKe(keId, ke)"
                                    >
                                        <span class="ke-item">{{
                                            ke.keName
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
/* eslint-disable vue/no-duplicate-attributes */
import getShellModel from "./getShellModel";
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            menuTree: [],
            curGanName: "",
            curMu: "",
            curMuName: "",
            curKe: "",
            curKeName: "",
            shells: []
        };
    },
    created() {
        this.getMenuTree();
    },
    methods: {
        changeMu(gan, muId, mu = {}) {
            this.curGanName = gan._name;
            this.curMu = muId;
            this.curMuName = mu._name;
        },
        changeKe(keId, ke = {}) {
            this.curKe = keId;
            this.curKeName = ke.keName;
            const res = {
                curGanName: this.curGanName,
                curKe: this.curKe,
                curMu: this.curMu,
                curMuName: this.curMuName,
                curKeName: this.curKeName,
                ke
            };

            //
            const targetLIst = this.shells.filter(shell => {
                return shell.muId === res.curMu && shell.keId === res.curKe;
            });

            console.log("点击目录", targetLIst, res);

            this.$emit("choose", {
                ...res,
                targetLIst
            });

            this.onClose();
        },
        onClose() {
            this.$emit("input", false);
        },
        getMenuTree() {
            const res = getShellModel();
            const { menuTree, jsonList } = res;
            console.log("getShellModel", jsonList, menuTree);
            this.menuTree = menuTree;
        }
    }
};
</script>


<style lang="less" scoped>
.shell-menu {
    position: fixed;
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;

        background: rgba(0, 0, 0, 0.7);
    }
    .body {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1001;

        width: 60vw;
        height: 100vh;
        background: #fff;

        overflow: scroll;

        padding: 0 30px 0 30px;

        .title {
            font-weight: 600;
            padding: 20px 0 30px 0;
            color: #07c160;
        }

        .menu {
            padding-bottom: 100px;

            .gan {
                .gan-name {
                    font-size: 34px;
                    font-weight: 600;
                }
                .mu-list {
                    padding-left: 100px;
                }
            }
        }

        .mu-active {
            .mu-name {
                color: #ff5c38;
                font-weight: 600;
            }
        }

        .mu {
            padding: 15px 0 15px 0;
            border-bottom: 1px solid #eee;
            .mu-item {
                .mu-name {
                    font-size: 34px;
                    // font-weight: 500;
                }
            }
            .ke-list {
                padding-top: 20px;
            }

            .ke {
                color: #666;

                padding-left: 150px;

                .ke-item {
                    display: block;
                    padding: 15px 0;
                    font-size: 28px;
                }

                .shell {
                    padding-left: 150px;
                }
            }

            .ke-active {
                color: #07c160;
            }
        }
    }
}
</style>